<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../print.css" type="text/css" media="print">
<meta content="VerticalMenuBar,flexlib.controls.VerticalMenuBar,LEFT,RIGHT,direction,updateDisplayList,measure,getMenuAt" name="keywords">
<title>flexlib.controls.VerticalMenuBar</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="../../asdoc.js"></script><script type="text/javascript" language="javascript" src="../../cookies.js"></script><script type="text/javascript" language="javascript">
<!--
				asdocTitle = 'VerticalMenuBar - flexlib';
				var baseRef = '../../';
				window.onload = configPage;
			--></script>
<table style="display:none" id="titleTable" cellspacing="0" cellpadding="0" class="titleTable">
<tr>
<td align="left" class="titleTableTitle">API Documentation</td><td align="right" class="titleTableTopNav"><a onclick="loadClassListFrame('../../all-classes.html')" href="../../package-summary.html">All&nbsp;Packages</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../all-classes.html')" href="../../class-summary.html">All&nbsp;Classes</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../index-list.html')" href="../../all-index-A.html">Index</a>&nbsp;|&nbsp;<a href="../../index.html?flexlib/controls/VerticalMenuBar.html&amp;flexlib/controls/class-list.html" id="framesLink1">Frames</a><a onclick="parent.location=document.location" href="" style="display:none" id="noFramesLink1">No&nbsp;Frames</a></td><td rowspan="3" align="right" class="titleTableLogo"><img alt="Adobe Logo" title="Adobe Logo" class="logoImage" src="../../images/logo.jpg"></td>
</tr>
<tr class="titleTableRow2">
<td align="left" id="subTitle" class="titleTableSubTitle">Class&nbsp;VerticalMenuBar</td><td align="right" id="subNav" class="titleTableSubNav"><a href="#propertySummary">Properties</a>&nbsp;| <a href="#methodSummary">Methods</a>&nbsp;| <a href="#constantSummary">Constants</a></td>
</tr>
<tr class="titleTableRow3">
<td colspan="2">&nbsp;</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Class VerticalMenuBar"); titleBar_setSubNav(true,true,false,false,false,false,true,false,false,false,false,false,false,false);}
--></script>
<div class="MainContent">
<table cellspacing="0" cellpadding="0" class="classHeaderTable">
<tr>
<td class="classHeaderTableLabel">Package</td><td><a onclick="javascript:loadClassListFrame('class-list.html')" href="package-detail.html">flexlib.controls</a></td>
</tr>
<tr>
<td class="classHeaderTableLabel">Class</td><td class="classSignature">public class VerticalMenuBar</td>
</tr>
<tr>
<td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">VerticalMenuBar <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../images/inherit-arrow.gif"> mx.controls.MenuBar</td>
</tr>
</table>
<p></p>
   A VerticalMenuBar control defines a vertical, top-level menu bar that contains
   one or menu items, just like the horizontal MenuBar control.
  
   <p>For information and an example on the attributes that you can use 
   in the data provider for the VerticalMenuBar control, see the Menu control.</p>
     <p></p>
<a name="mxmlSyntaxSummary"></a><span class="classHeaderTableLabel">MXML Syntax</span><span style="display:none" id="showMxmlLink"><a onclick="toggleMXMLOnly();" href="#mxmlSyntaxSummary"><img class="collapsedImage" alt="collapsed" title="collapsed" src="../../images/collapsed.gif"> Show MXML Syntax</a>
<br>
</span><span id="hideMxmlLink"><a onclick="toggleMXMLOnly();" href="#mxmlSyntaxSummary"><img class="expandedImage" alt="expanded" title="expanded" src="../../images/expanded.gif"> Hide MXML Syntax</a></span>
<div class="mxmlSyntax" id="mxmlSyntax">   <p>
   The <code>&lt;flexlib:VerticalMenuBar&gt</code> tag inherits all of the tag attributes of its superclass, and
   adds the following tag attributes:
   </p>
   
   <pre>
   &lt;flexlib:VerticalMenuBar
     <b>Properties</b>
     direction="left|right"
   
   /&gt;
   </pre>
   </p>
     </div>
<script type="text/javascript" language="javascript">
<!--
setMXMLOnly();
--></script>
<p>
<span class="classHeaderTableLabel">See also</span>
</p>
<div class="seeAlso">mx.controls.MenuBar</div>
<br>
<hr>
</div>
<a name="propertySummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Properties</div>
<table id="summaryTableProperty" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#direction">direction</a> : String<div class="summaryTableDescription">
     Specifies which direction, either left or right, the menu opens.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
</table>
</div>
<a name="methodSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Methods</div>
<table id="summaryTableMethod" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#VerticalMenuBar()">VerticalMenuBar</a>()</div>
<div class="summaryTableDescription">
   Constructor
   </div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#getMenuAt()">getMenuAt</a>(index:int):Menu</div>
<div class="summaryTableDescription">
      Overridden to allow us to display the Menus to the left or right of the MenuItems.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
</table>
</div>
<a name="protectedMethodSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Protected Methods</div>
<table id="summaryTableProtectedMethod" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#measure()">measure</a>():void</div>
<div class="summaryTableDescription">
       Changed to calculate based on vertical layout.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#updateDisplayList()">updateDisplayList</a>(unscaledWidth:Number, unscaledHeight:Number):void</div>
<div class="summaryTableDescription">
       Changed to calculate based on vertical layout.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
</table>
</div>
<a name="constantSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Constants</div>
<table id="summaryTableConstant" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Constant</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#LEFT">LEFT</a> : String = "left"<div class="summaryTableDescription">[static]
     There are two possiblities for direction: left or right.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#RIGHT">RIGHT</a> : String = "right"<div class="summaryTableDescription">[static]
     There are two possiblities for direction: left or right.</div>
</td><td class="summaryTableOwnerCol">VerticalMenuBar</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
<!--
showHideInherited();
--></script>
<div class="MainContent">
<a name="propertyDetail"></a>
<div class="detailSectionHeader">Property detail</div>
<a name="direction"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">direction</td><td class="detailHeaderType">property</td>
</tr>
</table>
<div class="detailBody">
<code>direction:String</code>&nbsp;&nbsp;[read-write]<p>
     Specifies which direction, either left or right, the menu opens. 
     
     </p><p>This can be set via MXML or Actionscript. The direction will take 
     effect the next time a menu item is clicked.</p>
     
     <p>The default value is <code>"right"</code>.</p>
<span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get direction():String</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set direction(value:String):void</code>
<br>
</div>
<a name="constructorDetail"></a>
<div class="detailSectionHeader">Constructor detail</div>
<a name="VerticalMenuBar()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">VerticalMenuBar</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">constructor</td>
</tr>
</table>
<div class="detailBody">
<code>public function VerticalMenuBar()</code><p>
   Constructor
   </p></div>
<a name="methodDetail"></a>
<div class="detailSectionHeader">Method detail</div>
<a name="getMenuAt()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">getMenuAt</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td>
</tr>
</table>
<div class="detailBody">
<code>public override function getMenuAt(index:int):Menu</code><p>
      Overridden to allow us to display the Menus to the left or right of the MenuItems.
      
      </p><p>We're overriding getMenuAt for two reasons. First, we set a custom itemRenderer for 
      the menu if we're supposed to be facing left. Second, we add a listener that gets 
      executed when the menu is shown. The secret to what we're doing is we're repositiong
      the menu only after it has been positioned originally by the mx.controls.MenuBar class.
      This allows us to not have to override a ton of private methods of the MenuBar class.
      The fundamental problem with extending MenuBar for our purposes is that the showMenu 
      method is private. If showMenu was protected we might be able to just override that
      and specify our own coordinates for where to place the menu. But instead, we do it
      a sneaky way and try to move the Menu the instant it gets shown.</p>
      <span class="label">Parameters</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20px"></td><td><code><span class="label">index</span>:int</code></td>
</tr>
</table>
<p></p>
<span class="label">Returns</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"></td><td><code>Menu</code></td>
</tr>
</table>
</div>
<a name="measure()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">measure</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>protected override function measure():void</code><p>
       Changed to calculate based on vertical layout. Pretty much
       the same code as in MenuBar, but instad of using the X and width
       properties, now we're using Y and height.
      </p></div>
<a name="updateDisplayList()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">updateDisplayList</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void</code><p>
       Changed to calculate based on vertical layout. Pretty much
       the same code as in MenuBar, but instad of using the X and width
       properties, now we're using Y and height.
      </p><span class="label">Parameters</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20px"></td><td><code><span class="label">unscaledWidth</span>:Number</code></td>
</tr>
<tr>
<td class="paramSpacer">&nbsp;</td>
</tr>
<tr>
<td width="20px"></td><td><code><span class="label">unscaledHeight</span>:Number</code></td>
</tr>
</table>
</div>
<a name="constantDetail"></a>
<div class="detailSectionHeader">Constant detail</div>
<a name="LEFT"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">LEFT</td><td class="detailHeaderType">constant</td>
</tr>
</table>
<div class="detailBody">
<code>public static const LEFT:String = "left"</code><p>
     There are two possiblities for direction: left or right. Here we define
     these two constants that you should use in your AS code to change the
     direction of the VerticalMenuBar. So to change the direction the code would
     be something like: 
     menubar.direction = VerticalMenuBar.LEFT;
     </p></div>
<a name="RIGHT"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">RIGHT</td><td class="detailHeaderType">constant</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public static const RIGHT:String = "right"</code><p>
     There are two possiblities for direction: left or right. Here we define
     these two constants that you should use in your AS code to change the
     direction of the VerticalMenuBar.
     </p></div>
<br>
<br>
<hr>
<br>
<p></p>
<center class="copyright"> 
</center>
</div>
</body>
</html>
<!-- -->
